<!--
 * @autoAdd: zhuxiaobao
-->
<template>
  <a-modal :width="500" v-model="visible" title="提交测试" @ok="handleOk">
    <!-- 主表单区域 -->
    <a-form-model ref="form" :model="model" :rules="validatorRules">
      <a-row>
        <a-col :span="24">
          <a-form-model-item
            label="commit版本号"
            prop="commitNo"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-input v-model="model.commitNo" placeholder="请输入要提交测试commit版本号" />
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            label="测试案例"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="testCase"
          >
            <a-upload
              name="file"
              :headers="headers"
              :multiple="false"
              :action="`${baseUrl}/sys/common/upload`"
              @change="testCaseChange"
            >
              <a-button>
                <a-icon type="upload" />点击上传
              </a-button>
            </a-upload>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item
            label="自测结果"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            prop="selfTestResults"
          >
            <a-upload
              name="file"
              :headers="headers"
              :multiple="false"
              :action="`${baseUrl}/sys/common/upload`"
              @change="selfTestResultsChange"
            >
              <a-button>
                <a-icon type="upload" />点击上传
              </a-button>
            </a-upload>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import Vue from 'vue'
import { JEditableTableModelMixin } from '@/mixins/JEditableTableModelMixin'
import { postAction } from '@/api/manage'
export default {
  mixins: [JEditableTableModelMixin],
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      labelCol2: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol2: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      model: {
      },
      validatorRules: {
        commitNo: [{ required: true, message: '请输入需要测试GIT-Commit版本号!' },],
        testCase: [{ required: true, message: '请上传测试案例!' },],
        selfTestResults: [{ required: true, message: '请上传自测结果!' },]
      },
      baseUrl: process.env.VUE_APP_API_BASE_URL,
      headers: {
        'X-Access-Token': Vue.ls.get('Access-Token')
      },
      url: {
        add: '/demand/test/add'
      }
    }
  },
  methods: {
    edit(data) {
      this.visible = true
      this.model = { ...data }
    },
    handleOk() {
      this.$refs.form.validate(valid => {
        if (valid) {
          const data = {
            demandId: this.model.id,
            commitNo: this.model.commitNo,
            testCase: this.model.testCase,
            selfTestResults: this.model.selfTestResults
          }
          postAction(this.url.add, data).then(res => {
            this.$message.success(res.message)
            this.$emit('ok')
            this.visible = false
          })
        }else{
          return false
        }
      })

    },
    testCaseChange(file) {
      if (file.file.status === 'done') {
        const testCase = file.file.response.message
        this.model = { ...this.model, testCase }
      }
    },
    selfTestResultsChange(file) {
      if (file.file.status === 'done') {
        const selfTestResults = file.file.response.message
        this.model = { ...this.model, selfTestResults }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
</style>